{% extends 'novel_base.html'%}
{% load staticfiles %}
{% block style %}
<style>
    @keyframes spin {
        0%   { transform: rotate(180deg); }
        100% { transform: rotate(0deg); }
    }
    .glyphicon-hourglass{
        animation: spin 2000ms infinite ease;
    }
    .ellips{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>
{% endblock %}
{% block title %}搜索结果{% endblock %}
{% block content %}
    {% verbatim cdblock %}
	<div id="searchPage" class="container">
		<div class="bs-callout bs-callout-info">
            <h1 class="page-header">检索</h1>
            <div class="form-group">
			    <div class="input-group">
			        <input
                        type="text"
                        class="form-control"
                        placeholder="请输入小说或作者名"
                        v-model="name"
                        @keyup.enter="gotoNovelPage"
                    >
			        <div class="input-group-addon dropdown btn btn-info">
			            <span data-toggle="dropdown">
                            {{ website }}
                            <span class="caret"></span>
                        </span>
			            <ul class="dropdown-menu">
			                <li class="dropdown-header">推荐</li>
			                <li class="ddxs"><a href="#" @click="setWebsite('顶点小说')">顶点小说</a></li>
			                <li class="divider"></li>
			                <li class="dropdown-header">其他</li>
			                <li class="sjg disabled" title="正在开发"><a href="#" @click="setWebsite('三江阁')">三江阁</a></li>
			                <li class="xxsw disabled" title="正在开发"><a href="#" @click="setWebsite('小小书屋')">小小书屋</a></li>
			                <li class="bqg disabled" title="正在开发"><a href="#" @click="setWebsite('笔趣阁')">笔趣阁</a></li>
			            </ul>
			        </div>
			        <div class="input-group-addon btn btn-primary" @click='gotoNovelPage' :class="{disabled : clickable}">
			        	<span class="glyphicon" :class="[icon_what]"></span>
			        </div>
			    </div>
			</div>
            <div class="row">
                <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">最近浏览：</div>
                <div class="col-lg-2 col-md-4 col-sm-6 ol-xs-12" v-for="item in localData.latelySearch">
                    <a href="#" @click="gotoSearch(item)" v-cloak>{{ item }}</a>
                </div>
            </div>
            <p>使用顶点小说作为默认源，检索结果皆来自网络</p>
    {% endverbatim cdblock %}
            <img src="{% static 'imgs/load/loading2.gif' %}" id="load" class="hidden">
    {% verbatim cdblock %}
        </div>
        <div class="panel panel-default" v-for="item in novels">
            <div class="panel-heading">
                <div class="row">
                    <a :href="item.href" target="_blank" class="col-xs-12"><h4 v-cloak>{{ item.title }}</h4></a>
                </div>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-6 ellips" v-cloak>
                        <strong v-show="item.updateChapter">作者：</strong>
                        {{ item.author }}
                    </div>
                    <div class="col-xs-6 ellips" v-cloak>
                        <strong v-show="item.updateChapter">类型：</strong>
                        {{ item.type }}
                    </div>
                    <div class="col-xs-6 ellips" v-cloak>
                        <strong v-show="item.updateChapter">更新时间：</strong>
                        {{ item.updateTime }}
                    </div>
                    <div class="col-xs-6 ellips" v-cloak>
                        <strong v-show="item.updateChapter">最新章节：</strong>
                        {{ item.updateChapter }}
                    </div>
                </div>
            </div>
        </div>
	</div>
	{% endverbatim cdblock %}
	<span class="website hidden">{{search.website}}</span>
	<span class="nvname hidden">{{search.name}}</span>
{% endblock %}

{% block footerscript %}
    <script src="{% static 'js/novel/search.js' %}"></script>
{% endblock %}